import {
    trigger,
    state,
    style,
    query,
    animate,
    group,
    stagger,
    keyframes,
    transition,
} from '@angular/animations';


export const fadeIn = trigger('fadeIn', [
    transition(':increment', [
        query(':enter', [
            style({
                opacity: 0,
                transform: 'translateX(100%)',
            }),
            stagger(100, [
                animate('400ms cubic-bezier(0.35, 0, 0.25, 1)', style({
                    opacity: 1,
                    transform: 'none'
                }))
            ])
        ]),
    ]),
    transition(':decrement', [
        query(':leave', [
            style({
                opacity: 1,
                transform: 'translateX(0%)',
            }),
            stagger(-300, [
                animate('1000ms cubic-bezier(0.35, 0, 0.25, 1)', style({
                    opacity: 0,
                    transform: 'translateX(-100%)',
                    backgroundColor: 'red',
                }))
            ])
        ])
    ]),
])


export const groupFlyInOut = trigger('groupFlyInOut', [
    state('in', style({
        width: 120,
        transform: 'translateX(0)', opacity: 1
    })),
    transition('void => *', [
        style({ width: 10, transform: 'translateX(50px)', opacity: 0 }),
        group([
            animate('0.3s 0.1s ease', style({
                transform: 'translateX(0)',
                width: 120
            })),
            animate('0.3s ease', style({
                opacity: 1
            }))
        ])
    ]),
    transition('* => void', [
        group([
            animate('0.3s ease', style({
                transform: 'translateX(50px)',
                width: 10
            })),
            animate('0.3s 0.2s ease', style({
                opacity: 0
            }))
        ])
    ])
])